<template>
  <div class="bpm-flow">
    <div class="sec-title">审批流程</div>
    <FlowGraph :showTitle="true" :svgHeightProps="500" :scale="0.8" :resultsData="resultsData"> </FlowGraph>
  </div>
</template>

<script>
import Graph from "@didi/flow-graph";
const { FlowGraph } = Graph;
import { get } from "@/utils/http";
let { NODE_ENV } = process.env;
let envEnum = {
  development: { pr: "//api-kylin.intra.xiaojukeji.com/flow_api_stage", token: "mRMCFlJHGg" },
  test: { pr: "//api-kylin.intra.xiaojukeji.com/flow_api_test", token: "PD7TPGCe7H" },
  "cn-pre": { pr: "//api-kylin.intra.xiaojukeji.com/flow_api_stage", token: "mRMCFlJHGg" },
  cn: { pr: "//api-kylin.intra.xiaojukeji.com/flow", token: "19rxryEzmI" },
};
export default {
  name: "bpmnFlowGraph",
  props: {
    data: Object,
  },
  components: { FlowGraph },
  data() {
    return {
      resultsData: {},
    };
  },
  computed: {},
  mounted() {
    this.initPage();
  },
  methods: {
    initPage() {
      let { bpmId } = this.data;
      get(
        `${envEnum[NODE_ENV].pr}/rest/process-instances/forecast/${bpmId}`,
        {},
        { token: envEnum[NODE_ENV].token, username: "" },
      ).then((res) => {
        console.log("[ res sadfewafew ] >", res);
        this.resultsData = res;
      });
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.bpm-flow {
  // height: 500px;
}
</style>
